<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @edit="handleUpdate"
      @multi-actions="handleMultiActions"
    >

      <template slot="filter-content">

        <dic-list-select v-model="listQuery.params.cusType" dic-code="cus_type" title="客户类型" />
        <dic-list-select v-model="listQuery.params.source" dic-code="source" title="客户来源" />
        <dic-list-select v-model="listQuery.params.level" dic-code="level" title="客户级别" />
        <el-input v-model="listQuery.params.name" style="width: 200px" placeholder="搜索客户名称" class="filter-item" />

<!--        <el-button-group class="filter-item" style="float:  right">-->
<!--          <el-button v-permission="['sys:user:import']" size="mini" icon="el-icon-upload2" @click="showImport">导入</el-button>-->
<!--          <el-button v-permission="['sys:user:export']" size="mini" icon="el-icon-download" @click="exportExcel">导出</el-button>-->
<!--        </el-button-group>-->

      </template>

      <template slot="data-columns">

        <el-table-column
          type="selection"
          width="55"
        />

        <el-table-column
          label="客户名称"
          show-overflow-tooltip>

          <template slot-scope="scope">
            <router-link class="router-link" :to="{name: 'CustomerUpdate', params:{id: scope.row.id}}">
             {{scope.row.name}}
            </router-link>
          </template>

        </el-table-column>

        <el-table-column
          align="center"
          label="邮箱"
          prop="email"
        />

        <el-table-column
          align="center"
          label="手机号"
          prop="mobile"
        />

        <el-table-column
          align="center"
          label="客户类型"
          prop="cusType_dictText"
        />

        <el-table-column
          align="center"
          label="客户级别"
          prop="level_dictText"
        />

        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
          sortable="custom"
        />

        <el-table-column
          align="center"
          label="联系时间"
          prop="contactTime"
          sortable="custom"
        />

        <el-table-column
          align="center"
          label="操作"
        >

          <template slot-scope="scope">
            <el-button type="default" size="mini" @click="handleUpdate(scope.row.id)">详情</el-button>
            <el-button type="primary" size="mini" @click="handleGotOne(scope.row.id)">认领</el-button>
          </template>
        </el-table-column>

      </template>
    </data-table>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import permission from '@/directive/permission'
import DicListSelect from '@/components/DicListSelect'
import { apiCustomerGot } from '@/api/customer/customer'

export default {
  directives: { permission },
  components: { DicListSelect, DataTable },
  props: {

  },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {

        }
      },

      options: {

        add: {
          enable: true,
          permission: 'customer:add',
          router: { name: 'CustomerAdd' }
        },
        edit: {
          enable: true,
          permission: 'customer:update',
          router: { name: 'CustomerUpdate', params: { id: '$id' }}
        },
        delete: {
          enable: true,
          permission: 'customer:delete',
          url: '/api/sys/user/delete'
        },

        // 列表请求URL
        listUrl: '/api/customer/customer/paging-sea',
        // 批量操作列表
        multiActions: [
          {
            permission: 'customer:got',
            value: 'batchGot',
            label: '批量认领'
          }
        ]
      }
    }
  },

  created() {

  },

  methods: {

    handleUpdate(id) {
      this.$router.push({ name: 'CustomerUpdate', params: { id: id }})
    },

    handleMultiActions(event) {
      if (event.opt === 'batchGot') {
        this.handleGotBatch(event.ids)
      }
    },

    handleGotBatch(ids) {
      // 删除
      this.$confirm('确实要认领客户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiCustomerGot(ids).then(() => {
          this.$message({
            type: 'success',
            message: '客户认领成功!'
          })
          this.$refs.pagingTable.getList()
        })
      })
    },

    handleGotOne(id) {
      this.handleGotBatch([id])
    }
  }
}
</script>

